<template>
  <Header />
  <div class="application-container">
    <h1>个人申请进度查询</h1>
    <div v-if="loading">
      <el-loading :visible="loading">加载中...</el-loading>
    </div>
    <div v-else-if="error">
      <el-alert
        title="错误"
        type="error"
        :description="error"
        show-icon
      />
    </div>
    <div v-else>
      <el-table :data="applications" style="width: 100%;height: 80vh;">
        <el-table-column prop="title" label="文章名称"  header-align="center" />
        <el-table-column prop="coverImg" label="文章封面" width="150" align="center">
          <template #default="scope">
            <img :src="scope.row.coverImg" alt="文章封面" style="width: 100px; height: auto;">
          </template>
        </el-table-column>
        <el-table-column label="申请时间" width="180" header-align="center">
          <template #default="scope">
            {{ formatDate(scope.row.applicationTime) }}
          </template>
        </el-table-column>
        <el-table-column label="审核时间" width="180" header-align="center">
          <template #default="scope">
            <!-- 审核时间可能为空，需要做空值处理 -->
            {{ scope.row.auditTime ? formatDate(scope.row.auditTime) : '' }}
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" align="center">
          <!-- 自定义审核状态列 -->
          <template #default="scope">
            <el-tag
              :type="getTagType(scope.row.auditStatus)"
              size="small"
            >
              {{ scope.row.auditStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditReason" label="审核原因" header-align="center"/>
      </el-table>
      <div v-if="applications.length === 0">
        <el-empty description="暂无申请记录" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import request from '@/api/request';
import Header from '@/components/Header.vue';
import { ElLoading, ElAlert, ElEmpty, ElTable, ElTableColumn, ElTag } from 'element-plus';

const loading = ref(true);
const error = ref<string | null>(null);
const applications = ref<any[]>([]);

// 根据审核状态返回对应的 tag 类型
const getTagType = (status: string) => {
  if (status === '待审核') {
    return 'info';
  } else if (status === '审核通过') {
    return 'success';
  } else if (status === '审核失败') {
    return 'danger';
  }
  return 'info';
};

// 格式化日期时间
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleString();
};

// 获取申请进度数据
const fetchApplications = async () => {
  try {
    const res = await request.get('/application/getApplication');
    if (res.code === 200) {
      applications.value = res.data;
    } else {
      error.value = res.message || '获取申请进度失败，请稍后重试';
    }
  } catch (err: any) {
    error.value = err.message || '获取申请进度失败，请稍后重试';
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchApplications();
});
</script>

<style scoped>
.application-container {
  padding: 15px;
  margin-top: 60px;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 添加背景渐变 */
  min-height: 85vh;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
}

h1 {
  margin-bottom: 5px;
  font-size: 20px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* 添加文本阴影 */
  transition: color 0.3s ease; /* 添加过渡效果 */
}

h1:hover {
  color: #505050; /* 鼠标悬停时改变颜色 */
}

</style>
